<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="胡爱静">
    <title>首页</title>
    <style>
        body {
            margin: 0;
            background-color: #f0f1f2;
        }

        .container {
            width: 1200px;
            margin: 0 auto;
        }

        nav {
            width: 100%;
            height: 50px;
            line-height: 50px;
            border: 2px solid #999;
        }

        ul {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .nav-list {
            display: flex;
        }

        .nav-list li {
            margin-right: 12px;
        }

        .nav-list li a,
        .nav-list li {
            color: black;
            text-decoration: none;
            font-size: 14px;
            display: inline-block;
            height: 47px;
            position: relative;
        }
        .active{
            border-bottom: 2px solid #38f;
        }
        #one a{
            color: #38f;
        }
        .nav-list li a:hover{
            color: red;
        }
        
        .juji li{
            width: 44%;
            height: 30px;
            line-height: 30px;
            overflow: hidden; 
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .juji{
             position: absolute; 
            width: 200px;
            height:150px;
            margin-left: -80px;
            padding: 10px 10px 10px 5px;
            margin-top: -2px;
            display: flex;
            flex-wrap: wrap;
            border: 1px solid lightgray;
            background: #fff;
            box-shadow:0 0 2px 3px lightgray;
            display: none;  
        }
        .juji .tubiao{
            width: 13px;
            height: 8px;
            position: absolute;
            background: url(001.png) -112px 0 no-repeat;
            display: inline-block;
            top: -8px;
            left: 90px;
        }
        .nav-list li:hover .juji{
              display: block; 
              display: flex;  
        }
        .nav-list li span{
            display: inline-block;
            width: 10px;
            height: 5px;
            background: url(youku.png) -60px 0 no-repeat;
            position: absolute;
            top: 23px;
            left: 35px;
           
        }
        .nav-list li :hover span{
             transition: all 0.3s ease;
        }
        .more{
            width: 100px;
            height: 200px;
            position: absolute; 
            border: 1px solid lightgray;
            background: #fff;
            box-shadow:0 0 2px 4px lightgray;
            display: none;
        }
        .more li{
            padding:0 10px;
        }
    </style>
</head>

<body>
    <nav>
        <div class="container">
            <ul class="nav-list">
                <li id="one"><a href="#" class="active">首页</a></li>
                <li><a href="#">剧集</a>
                  <ul class="juji">
                      <li class="tubiao"></li>
                      <li><a href="#">楚乔传 TV版</a></li>
                      <li><a href="#">春风十里不如你</a></li>
                      <li><a href="#">镇魂街&nbsp;第一季</a></li>
                      <li><a href="#">我的前半生</a></li>
                      <li><a href="#">醉玲珑</a></li>
                      <li><a href="#">微微一笑很倾城</a></li>
                      <li><a href="#">极品三国2017</a></li>
                      <li><a href="#">三生三生十里桃花</a></li>
                  </ul>
                </li>
                <li><a href="#">电影</a>
                <ul class="juji">
                    <li class="tubiao"></li>
                      <li><a href="#">速度与激情8</a></li>
                      <li><a href="#">人间大炮</a></li>
                      <li><a href="#">战狼</a></li>
                      <li><a href="#">杀破狼2</a></li>
                      <li><a href="#">逆时营救</a></li>
                      <li><a href="#">记忆大师</a></li>
                      <li><a href="#">我的外星女友</a></li>
                      <li><a href="#">有部电影</a></li>
                </ul>
                </li>
                <li><a href="#">综艺</a>
                 <ul class="juji">
                      <li class="tubiao"></li>
                      <li><a href="#">极限挑战 第三季</a></li>
                      <li><a href="#">挑战者联盟 第三季</a></li>
                      <li><a href="#">脑洞大开&nbsp;第一季</a></li>
                      <li><a href="#">火星情报局 第三季</a></li>
                      <li><a href="#">漫画暴走大事件 第五季</a></li>
                      <li><a href="#">日日煮 2017</a></li>
                      <li><a href="#">举杯呵呵喝 2017</a></li>
                      <li><a href="#">开心俱乐部 第一季</a></li>
                  </ul>
                </li>
                <li><a href="#">音乐</a></li>
                <li><a href="#">少儿</a>
                 <ul class="juji">
                      <li class="tubiao"></li>
                      <li><a href="#">小猪佩奇</a></li>
                      <li><a href="#">宝迪与好友的英雄之旅</a></li>
                      <li><a href="#">京剧猫之新年的冒险</a></li>
                      <li><a href="#">汪汪队立大功 第二季</a></li>
                      <li><a href="#">会说话的家族</a></li>
                      <li><a href="#">我的Tom猫短片</a></li>
                      <li><a href="#">小玲玩具</a></li>
                      <li><a href="#">棉花糖和云朵妈妈</a></li>
                  </ul>
                </li>
                <li><a href="#">来疯</a></li>
                <li><a href="#">直播</a></li>
                <li><a href="#">片库</a></li>
                <li><a href="#">资讯</a></li>
                <li><a href="#">纪实</a></li>
                <li><a href="#">公益</a></li>
                <li><a href="#">体育</a></li>
                <li><a href="#">汽车</a></li>
                 <li><a href="#">财经</a></li>
                <li><a href="#">科技</a></li>
                <li><a href="#">娱乐</a></li>
                <li><a href="#">文化</a></li>
                <li><a href="#">动漫</a></li>
                <li><a href="#">搞笑</a></li>
                <li><a href="#">旅游</a></li>
                <li><a href="#">时尚</a></li>
                <li><a href="#">亲子</a></li>
                <li><a href="#">教育</a></li>
                <li><a href="#">游戏</a></li>
                <li>
                    更多
                    <span></span>
                    <ul class="more">
                        <li class="tubiao"></li>
                        <li>VR</li>
                        <li>原创</li>
                        <li>生活</li>
                        <li>排行</li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>
</body>

</html>
<script>

</script>